<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.js'></script>
<script src='https://cdn.jsdelivr.net/vue.router/0.7.10/vue-router.min.js'></script>
<div id="root">
	<ul>
		<li v-for='product in products | filterBy "水果" in "category" | orderBy "price" 1'>
			{{product.name}}-{{product.price | currency}}
		</li>
	</ul>
</div>
<script>
	/**
	 * 过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个数据结果的简单函数。Vue有很多很便利的过滤器，
	 * 滤器通常会使用管道标志 “ | ”， 比如：
	 * {{ msg | capitalize }}
	 * // 'abc' => 'ABC'
	 * uppercase过滤器 : 将输入的字符串转换成大写字母的过滤器。
	 * VueJs允许你链式调用过滤器，简单的来说，就是一个过滤器的输出成为下一个过滤器的输入，然后再次过滤。接下来
	 * 我们可以想象一个比较简单的例子，使用了Vue的 filterBy + orderBy
	 * 过滤器来过滤所有商品products。过滤出来的产品是属于水果类商品。
	 * filterBy过滤器 : 过滤器的值必须是一个数组，filterBy + 过滤条件。过滤条件是：'string || function'+ in
	 * 'optionKeyName'
	 * orderBy过滤器 : 过滤器的值必须是一个数组，orderBy + 过滤条件。过滤条件是：'string || array ||function' +
	 * 'order ≥ 0 为升序 || order < 0 为降序'
	 * 接下来，我们可以看下下面这个例子：我们有一个商品数组products，我们希望遍历这个数组，并把他们打印成一张
	 * 单，这个用v-for很容易实现。
	 */
	var vm = new Vue({
		el : '#root',
		data : {
		    products: [
		      {name: '苹果',price: 25,category: "水果"}, 
		      {name: '香蕉',price: 15,category: "水果"}, 
		      {name: '雪梨',price: 65,category: "水果"}, 
		      {name: '宝马',price: 2500,category: "汽车"},
		      {name: '奔驰',price: 10025,category: "汽车"}, 
		      {name: '柑橘',price: 15,category: "水果"}, 
		      {name: '奥迪',price: 25,category: "汽车"}
		    ]
		}
	})
</script>	
</body>
</html>